<template>
  <div class="page-home">
    <carousel />
    <!-- 文章推荐 -->
    <div class="artile-recommend">
      <!-- 左侧主要文章内容 -->
      <div class="left-cont">
        <!-- 具体内容项 -->
        <recom-item :artiList="artiList" />
      </div>
      <!-- 右侧注意点，说明等 -->
      <div class="right-port">
        <!-- 今日随笔 -->
        <div class="today-note">
          <h3><span>寄</span> 语</h3>
          <p>我从来就认为人的自由并不在于可以做他想做的事，而在于可以不做他不想做的事。我可能无法抛弃现在所拥有的一切，重新回到山里做只猴子。但也不会忘记那个地方将会赋予我新生。</p>
        </div>
        <!-- 注意事项 -->
        <div class="notice">
          <h3>注意事项</h3>
          <p v-for="item in noticeList"
             :key="item.id">{{item.id}}、<span>{{item.text}}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from '@/components/Carousel.vue' // 走马灯
import recomItem from '@/components/RecomItem.vue' //推荐文章组件
import { getIndexArticle } from '@/api/article'
export default {
  components: {
    carousel,
    recomItem
  },
  data() {
    return {
      //文章列表
      artiList: [
      ],
      // 注意事项
      noticeList: [
        { id: 1, text: '文明出行，一路平安。' },
        { id: 2, text: '出行办事，遵守时间。' },
        { id: 3, text: '健康娱乐，有益身心。' },
        { id: 4, text: '讲究卫生，爱护环境。' },
        { id: 5, text: '习俗禁忌，切勿冒犯。' }
      ]
    }
  },
  methods: {
    /* 获取首页推荐文章 */
    async initArticle() {
      let { data: res } = await getIndexArticle()
      console.log(res.data)
      this.artiList = res.data
    }
  },
  created() {
    this.initArticle()
  }
}
</script>

<style lang="less" scoped>
.page-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 文章推荐 */
  .artile-recommend {
    margin-top: 50px;
    margin: 50px auto 30px auto;
    width: 1060px;
    /* 左侧内容 */
    .left-cont {
      float: left;
      width: 75%;
    }
    /* 右侧事项 */
    .right-port {
      float: right;
      width: 20%;
      /* 寄语 */
      .today-note {
        padding-bottom: 15px;
        min-height: 200px;
        border-radius: 4px;
        h3 {
          padding: 20px 0;
          text-align: center;
          font: 700 18px '宋体';
          span {
            font: 700 18px '宋体';
            color: #33c5c5;
          }
        }
        p {
          padding: 0 10px;
          text-indent: 2em;
          line-height: 24px;
          letter-spacing: 2px;
          font-weight: 400;
          font-size: 16px;
          font-family: '宋体';
        }
      }
      /* 注意事项 */
      .notice {
        margin-top: 30px;
        min-height: 200px;
        border-radius: 4px;
        h3 {
          padding: 15px 0;
          text-align: center;
          font-weight: 400;
          font-size: 17px;
          letter-spacing: 2px;
        }
        p {
          padding-left: 25px;
          line-height: 26px;
          font-size: 14px;
          span {
            padding-left: 2px;
          }
        }
      }
    }
  }
}
</style>